import { Outlet, useNavigate } from 'react-router-dom'
import { Layout, Menu } from 'tdesign-react'
import {
  HomeIcon,
  PlayDemoIcon,
  InfoCircleIcon,
} from 'tdesign-icons-react'
import './index.less'

const { Aside, Content } = Layout
const { SubMenu, MenuItem } = Menu

const Layouts = () => {

  const navigate = useNavigate()

  const menuList = [
    {
      label: '首页',
      key: 'home',
      icon: <HomeIcon />,
      path: '/home'
    },
    {
      label: '框架演示',
      key: 'jsdemo',
      icon: <PlayDemoIcon />,
      path: '/jsdemo',
      children: [
        {
          label: 'FabricJS',
          key: 'fabricjs',
          path: '/fabricjs'
        }
      ]
    },
    {
      label: '关于',
      key: 'about',
      icon: <InfoCircleIcon />
    }
  ]

  const toMenuPath = (path: string) => {
    navigate('/aio' + path)
  }

  const renderSideBar = () => {
    return menuList.map((item: any, index: number) => {
      if (!item.children || item.children.length == 0) {
        return <MenuItem
          value={item.key}
          icon={item.icon}
          key={index}
          onClick={() => { toMenuPath(item.path) }}
        >{item.label}</MenuItem>
      } else {
        return <SubMenu
          value={item.key}
          icon={item.icon}
          title={item.label}
          key={index}
        >
          {item.children.map((_item: any, _index: number) => {
            return <MenuItem
              value={_item.key}
              key={_index}
              icon={_item.icon}
              onClick={() => { toMenuPath(item.path + _item.path) }}
            >{_item.label}</MenuItem>
          })}
        </SubMenu>
      }

    })
  }

  return <div className='layouts-container'>
    <Layout>
      <Aside>
        <Menu>
          {renderSideBar()}
        </Menu>
      </Aside>
      <Layout>
        <Content className='layouts-content'>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  </div>
}

export default Layouts
